<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="/public/css/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="/public/css/wap.css?2">

    <script src="/public/js/jquery.min.js"></script>
    <script src="/public/js/amazeui.min.js"></script>
    <title>新闻列表</title>
</head>
<body style="background:#ececec;padding-top: 0;">
<div class="pet_mian" >
    <header data-am-widget="header"
            class="am-header am-header-default am-header-fixed">
        <div class="am-header-left am-header-nav" >
            <a href="javascript:history.back();" class="">

                <i class="am-header-icon am-icon-angle-left" style="font-size: 30px"></i>
            </a>
        </div>

        <h1 class="am-header-title">
            <a href="#title-link" class="">
                生活简讯
            </a>
        </h1>

        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">

                <!--<i class="am-header-icon am-icon-bars"></i>-->
            </a>
        </div>
    </header>

    <!-- header  -->

    <div class="pet_content pet_content_list">
        <div class="pet_article_like">
            <div class="pet_content_main pet_article_like_delete">
                <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
                    <div class="am-list-news-bd">
                        <ul class="am-list">


                        </ul>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>

<script>
    $(function(){
        var  progress = $.AMUI.progress;
        progress.start();
        $.ajax({
            url:'https://www.apiopen.top/satinApi?type=1&page=1',
            dataType:'json',
            success:function(res){
                if(res.code == 200){
                    render(res.data);
                    progress.done()
                    auto_resize();
                }
            }
        })

        // 动态计算新闻列表文字样式

        $(window).resize(function() {
            auto_resize();
        });
        $('.am-list-thumb img').load(function(){
            auto_resize();
        });
        $('.pet_article_like li:last-child').css('border','none');
        function auto_resize(){
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());
            // alert($('.pet_list_one_nr').height());
        }
        $('.pet_article_user').on('click',function(){
            if($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')){
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
            }else{
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
            }
        });

        $('.pet_head_gd_ico').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });



        function render(arr){
             let html = '';
             arr.forEach(ele=>{
                 html += `
 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
                                <div class="pet_list_one_info">
                                    <div class="pet_list_one_info_l">
                                        <div class="pet_list_one_info_ico"><img src="${ele.profile_image}" alt=""></div>
                                        <div class="pet_list_one_info_name">${ele.screen_name} </div>
                                    </div>
                                    <div class="pet_list_one_info_r">
                                        <div class="pet_list_tag pet_list_tag_xxs">${ele.theme_name}</div>
                                    </div>
                                </div>
                                <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
                                    <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">
                                    ${ele.name}
</a></h3>
                                    <div class="am-list-item-text pet_list_one_text" style="position: relative;-webkit-line-clamp: 3;max-height: 3.9em">
                                    ${ele.text}
</div>

                                </div>
                                <div class="am-u-sm-4 am-list-thumb">
                                    <a href="###" class="">
                                        <img src="${ele.image0 || ele.bimageuri || '/public/img/q5.jpg'}" class="pet_list_one_img" alt=""/>
                                    </a>
                                </div>
                            </li>
                 `
             });
             $('.am-list').html(html);
        }
    });

</script>
</body>
</html>